<template>
    <div class="edu-page-warp">
        <div class="edu-page-title">{{$t('message.filterCondition')}}</div>
        <el-form
            :model="model"
            ref="model"
            label-width="120px"
            label-position="left"
            class="bg-white pd-12px"
        >
            <el-card shadow="never" body-style="padding: 24px;">
                <el-row :gutter="24" style="height: 70px;">
                    <el-col :span="8">
                        <el-form-item :label="$t('label.grade')" prop="grade">
                            <el-date-picker
                                v-model="model.grade"
                                value-format="yyyy"
                                type="year"
                                :placeholder="$t('message.plsSelect')"
                                @change="getProfessionClassList"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item
                            :label="$t('label.college')"
                            :placeholder="$t('message.all')"
                            prop="faculty"
                        >
                            <DictSelect
                                v-model="model.faculty"
                                @change="getProfessionClassList"
                                :data="options.faculty"
                            ></DictSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('culture.profession.category')">
                            <el-select
                                style="width: 80%;"
                                v-model="model.category"
                                :placeholder="$t('message.all')"
                            >
                                <el-option
                                    v-for="item in options.category"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24" style="height: 50px;">
                    <!-- <el-col :span="8">
            <el-form-item :label="$t('culture.profession.professionClassCode')">
              <el-select
                style="width: 100%;"
                v-model="model.bigCategory"
                :placeholder="$t('message.all')"
              >
                <el-option
                  v-for="item in options.bigCategory"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
                    </el-col>-->
                    <el-col :span="8">
                        <el-form-item :label="$t('culture.profession.categoryCode')">
                            <el-select
                                style="width: 100%;"
                                v-model="model.categoryCode"
                                @change="getEduProCode"
                                :placeholder="$t('message.all')"
                            >
                                <el-option
                                    v-for="item in options.categoryCode"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('culture.profession.ministryClassCode')">
                            <el-select
                                style="width: 100%;"
                                v-model="model.professionClassCode"
                                :placeholder="$t('message.all')"
                            >
                                <el-option
                                    v-for="item in options.professionClassCode"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item class="float-right">
                            <el-button @click="reset">{{$t('message.reset')}}</el-button>
                            <el-button
                                type="primary"
                                @click="getEduProfessions"
                            >{{$t('message.filter')}}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-row :gutter="24" style="height: 70px;">
          
                </el-row>-->
            </el-card>
        </el-form>
        <div
            class="edu-page-title mg-top"
        >{{$t('culture.profession.profession')+$t('culture.profession.category')}}</div>
        <el-card shadow="never" body-style="padding: 24px;">
            <div class="edu-opertion-bar">
                <div class="float-left">
                    <el-input
                        v-model="model.keyWord"
                        placeholder="代码或专业名称"
                        style="width:250px"
                        @keyup.enter.native="getEduProfessions"
                    >
                        <i
                            class="el-icon-search"
                            slot="suffix"
                            style="margin-top:10px;cursor:pointer"
                            @click="getEduProfessions()"
                        ></i>
                    </el-input>
                </div>
                <div class="float-right" v-if="isShowHandle">
                    <el-button @click="exportRel">{{$t('message.export')}}</el-button>
                </div>
            </div>
            <el-table
                :data="tableData"
                size="mini"
                @selection-change="handleSelectionChange"
                stripe
            >
                <!-- <el-table-column type="selection" width="30"></el-table-column> -->
                <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
                <el-table-column :label="$t('dic.grade')" width="120">
                    <template slot-scope="scope">{{scope.row.grade}}</template>
                </el-table-column>
                <el-table-column :label="$t('dic.faculty')">
                    <template slot-scope="scope">
                        <el-popover
                            placement="bottom-start"
                            width="200"
                            trigger="hover"
                            :content="getFacultyStr(scope.row.faculty)"
                        >
                            <span slot="reference">{{getFacultyStr(scope.row.faculty)}}</span>
                        </el-popover>
                    </template>
                </el-table-column>
                <!-- <el-table-column l:label="$t('culture.profession.proCode')">
          <template slot-scope="scope">{{scope.row.professionCode}}</template>
                </el-table-column>-->
                <el-table-column :label="$t('culture.profession.proCodeName')">
                    <template slot-scope="scope">
                        <el-popover
                            placement="bottom-start"
                            width="200"
                            trigger="hover"
                            :content="scope.row.professionNameConcat"
                        >
                            <span slot="reference">{{scope.row.professionNameConcat}}</span>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('culture.profession.category')">
                    <template slot-scope="scope">
                        <el-popover
                            placement="bottom-start"
                            width="200"
                            trigger="hover"
                            :content="getCategoryStr(scope.row.category)"
                        >
                            <span slot="reference">{{getCategoryStr(scope.row.category)}}</span>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('culture.profession.categoryCode')">
                    <template slot-scope="scope">
                        <el-popover
                            placement="bottom-start"
                            width="200"
                            trigger="hover"
                            :content="scope.row.categoryNameConcat"
                        >
                            <span slot="reference">{{scope.row.categoryNameConcat}}</span>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('culture.profession.ministryClassCode')">
                    <template slot-scope="scope">
                        <el-popover
                            placement="bottom-start"
                            width="200"
                            trigger="hover"
                            :content="scope.row.professionClassNameConcat"
                        >
                            <span slot="reference">{{scope.row.professionClassNameConcat}}</span>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('culture.profession.ministryEduCode')">
                    <template slot-scope="scope">
                        <el-popover
                            placement="bottom-start"
                            width="200"
                            trigger="hover"
                            :content="scope.row.ministryEduNameConcat"
                        >
                            <span slot="reference">{{scope.row.ministryEduNameConcat}}</span>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
            <div class="edu-pagination">
                <div class="float-right">
                    <el-pagination
                        @size-change="onPageSizeChange"
                        @current-change="onCurrentPageChange"
                        :current-page="model.pageNum_"
                        :page-sizes="[10, 20, 40, 80, 100]"
                        :page-size="model.pageSize_"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="model.total_"
                        style="float: right;margin:10px 60px 0 0;"
                    ></el-pagination>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script>
import bus from "common/src/utils/bus";
import UTILS from "common/src/utils/utils";
import { queryDic } from "common/src/api/dictionary";
import {
    findCategoryList,
    findProfessionClassList,
    findProfessionList
} from "common/src/api/culture/eduProfession";
import {
    findCampusMinistryRel,
    campusMinistryRelExport,
    findProByParam
} from "common/src/api/culture/campusProfession";
export default {
    name: "equeryProfession",
    data() {
        return {
            tableData: [],
            options: {
                faculty: [],
                category: [],
                categoryCode: [],
                bigCategory: [],
                professionClassCode: []
            },
            model: {
                pageNum_: 1,
                pageSize_: 10,
                total_: 0,
                grade: "",
                faculty: "",
                category: "", //类别
                bigCategory: "", //专业类
                categoryCode: "", //门类
                professionClassCode: "", //教育部专业类
                keyWord: ""
            },
            //是否显示操作按钮
            isShowHandle: false
        };
    },
    created() {
        this.$store.getters.getFuncUnderPage(this.$route.path).then(funcs => {
            this.functions = funcs;
        });
        //进入页面根据本科生和研究生判断操作按钮是否显示
		let user =
            this.$store.state.session.user ||
            JSON.parse(localStorage.getItem("user"));
        if (user) {
            this.isShowHandle = user.currentManageDptId === "1";
		}
		//切换管理部门
		bus.$on("updateCurrentManageDeptId", currentManageDeptId => {
            if(currentManageDeptId==1){
				this.isShowHandle = true;
			}else{
				this.isShowHandle = false;
			};
            this.reset();
        });
    },
    mounted() {
        this.getEduProfessions();
        this.initOptions();
    },
    computed: {},
    watch: {},
    methods: {
        getProfessionClassList() {
            if (!this.model.grade || this.model.category == 2) {
                return;
            }
            // console.log(this.model.category == 2);
            //let data="?category=";
            this.options.bigCategory = [];
            this.model.bigCategory = "";

            let postData = _.cloneDeep(this.model);
            postData.grade = Number(postData.grade);
            const data = {
                grade: Number(postData.grade),
                trainingLevel: "",
                faculty: postData.faculty,
                category: "1"
            };
            findProByParam(data).then(res => {
                //findProfessionClassList(data+this.model.categoryCode)
                if (res.code == 200) {
                    for (let key in res.data) {
                        this.options.bigCategory.push({
                            value: res.data[key].professionCateGory,
                            label:
                                res.data[key].professionCateGoryName +
                                "(" +
                                res.data[key].professionCateGory +
                                ")"
                        });
                    }
                }
            });
        },
        getEduProCode() {
            if (!this.model.categoryCode) {
                return;
            }

            let data = "?category=";
            this.options.professionClassCode = [];
            this.model.professionClassCode = "";
            findProfessionClassList(data + this.model.categoryCode).then(
                res => {
                    //findProfessionList(data+this.model.categoryCode+"&proClass="+this.model.bigCategory)
                    if (res.code == 200) {
                        for (let key in res.data) {
                            this.options.professionClassCode.push({
                                value: res.data[key].code,
                                label:
                                    res.data[key].name +
                                    "(" +
                                    res.data[key].code +
                                    ")"
                            });
                        }
                    }
                }
            );
        },
        getEduProfessions() {
            let postData = _.cloneDeep(this.model);
            postData.grade = Number(postData.grade);
            findCampusMinistryRel(postData).then(res => {
                if (res.code == 200) {
                    //根据部门判断是否显示数据
					if(this.isShowHandle){
                        this.tableData = res.data.list;
                        this.model.pageNum_ = res.data.pageNum_;
                        this.model.pageSize_ = res.data.pageSize_;
                        this.model.total_ = res.data.total_;    
					}else{
                        this.tableData = [];
                        this.model.pageNum_ = 1;
                        this.model.pageSize_ = 10;
                        this.model.total_ = 0;
					} 
                }
            });
        },
        getCategoryList() {
            findCategoryList().then(res => {
                if (res.code == 200) {
                    for (let key in res.data) {
                        this.options.categoryCode.push({
                            value: res.data[key].code,
                            label:
                                res.data[key].name +
                                "(" +
                                res.data[key].code +
                                ")"
                        });
                    }
                }
            });
        },
        initOptions() {
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_YX"]
            };
            this.options.category.push({
                label: this.$t("culture.profession.profession"),
                value: "2"
            });
            this.options.category.push({
                label: this.$t("culture.profession.bigProfession"),
                value: "1"
            });
            queryDic(data).then(res => {
                if (res.code == 200) {
                    UTILS.fillSelect(
                        {
                            faculty: "X_YX"
                        },
                        res.data,
                        this.options
                    );
                }
            });
            this.getCategoryList();
        },
        onPageSizeChange(size) {
            this.model.pageSize_ = size;
            this.getEduProfessions();
        },
        onCurrentPageChange(currentPage) {
            this.model.pageNum_ = currentPage;
            this.getEduProfessions();
        },

        reset() {
            // console.log(this.model.grade);

            this.model.grade = "";
            this.model.faculty = "";
            this.model.category = "";
            this.model.bigCategory = "";
            this.model.categoryCode = "";
            this.model.professionClassCode = "";
            this.model.keyWord = "";
            this.getEduProfessions();
        },

        exportRel() {
            let postData = _.cloneDeep(this.model);
            postData.grade = Number(postData.grade);
            let data = Object.assign({}, postData);
            campusMinistryRelExport(data);
        },
        getFacultyStr(data) {
            let str = "";
            this.options.faculty.forEach(element => {
                if (element.value === data) {
                    str = element.label;
                }
            });
            return str;
        },
        getCategoryStr(data) {
            let str = "";
            this.options.category.forEach(element => {
                if (element.value === data) {
                    str = element.label;
                }
            });
            return str;
        }
    }
};
</script>

